// @use "element-plus/theme-chalk/src/index.scss" as *;
// 公共样式
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #2b7a4f,
    ),
  )
);

@use "element-plus/theme-chalk/src/index.scss" as *;

//
@import "./fonticon/index.css";
// el-input
.el-input {
  box-shadow: none !important;
  .el-input__wrapper {
    border: 1px solid #e1e7e4;
    background-color: #f3f5f4;
    box-sizing: border-box;
    box-shadow: none !important;
    color: #1d3c2b;
    .el-input__inner,
    .el-input__prefix {
      color: #1d3c2b;
    }
    &.is-focus {
      border-color: var(--mc);
      color: var(--mc);
      .el-input__inner,
      .el-input__prefix {
        color: var(--mc);
      }
    }
  }
}

// el-select el-select--small
.el-select {
  .el-input {
    .el-input__wrapper {
      // background:#2B7A4F05;
      box-shadow: none !important;
      color: #1d3c2b;
      background: #f3f5f4;
      &.is-focus {
        // box-shadow: none !important;
        box-shadow: 0px 0px 16px 0px rgba(43, 122, 79, 0.15) !important;
      }
      > * {
        color: #1d3c2b;
        &::placeholder {
          color: #1d3c2b;
        }
      }
      .el-select__icon {
        color: #1d3c2b;
      }
      input {
        &::placeholder {
          color: #1d3c2b73;
        }
      }
    }
  }
  .el-select__tags {
    .el-select-tags-wrapper {
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      .el-tag {
        margin: 0;
        padding: 0;
        background: transparent;
        color: #1d3c2b;
        &:not(:last-child) {
          &::after {
            content: "/";
          }
        }
      }
    }
  }
  &.no-tag-del {
    .el-select__tags {
      .el-select-tags-wrapper {
        .el-tag {
          .el-tag__close {
            display: none;
          }
        }
      }
    }
  }
}

.el-select__popper {
  box-shadow: 0px 0px 16px 0px rgba(29, 60, 43, 0.15);
  border-radius: 4px;
  .el-select-dropdown__wrap {
    .el-scrollbar__view {
      .el-select-dropdown__item {
        color: #1d3c2b;
        &:hover {
          background: #2b7a4f0d;
        }
        &.selected {
          background: #2b7a4f0d;
          color: #2b7a4f;
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

// el-checkbox is-checked
.el-checkbox {
  .el-checkbox__input {
    &.is-checked {
      .el-checkbox__inner {
        border-color: #2b7a4f;
        background: #fff;
        &::after {
          border-color: #2b7a4f;
        }
      }
    }
    .el-checkbox__inner {
      border: 1px solid #e1e7e4;
      border-radius: 2px;
    }
  }
}

.el-popper {
  border: none !important;
  background: transparent !important;
  &.el-select__popper {
    background: #ffffff !important;
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        height: 24px;
        line-height: 24px;
      }
    }
  }
}

.el-overlay.is-message-box {
  background: transparent;
  .el-message-box {
    background: #ffffff;
    box-shadow: 0px 8px 40px 8px rgba(29, 60, 43, 0.3);
    border-radius: 16px;
    border: none;
    padding:0;
    .el-message-box__header {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #eef5f1;
      height: 60px;
      box-sizing: border-box;
      padding: 0;
      .el-message-box__title {
        font-size: 20px;
        font-weight: 600;
        color: #1d3c2b;
      }
      .el-message-box__headerbtn {
        display: none;
      }
    }
    .el-message-box__content {
      padding: 16px 24px 24px 24px;
      .el-message-box__container {
        padding:18px;
        border-radius: 16px;
        border: 1px solid rgba(179, 190, 186, 0.5);
        font-size:14px;
        color: #1D3C2B;
        .el-message-box__status{
          font-size:21px !important;
        }
        .el-message-box-icon--warning{
          color:#E73528;
        }
        .el-message-box__message {
          padding-left:30px;
          p{
            line-height: 20px;
          }
        } 
      }
      
    }
    .el-message-box__btns{
        padding:0 24px 24px 24px;
    }
  }
}


*[data-title] {  // data-title 在我们需要加title属性的标签内 换成 data-title='张三'
  position: relative;

  // 样式：
  &:hover:after { 
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }
  // 具体控制title背景的样式 位置 字体等
  &:after {
    content: attr(data-title);
    background: rgba(4,8,6,0.8);
    box-shadow: 0px 8px 40px 0px rgba(4,8,6,0.15);
    border-radius: 4px;
    font-size: 10px;
    color: #FFFFFF;
    line-height: 14px;
    position: absolute;
    padding: 4px 10px;
    
    white-space: nowrap;
    z-index: 99999;
    left: 50%;
    top: 100%;
    transform: translate(-50%,4px);
    visibility: hidden;
    opacity: 0;
  }
}
